<template>
  <!-- 咨询列表 -->
  <view class="recommend-video-list">
    <block>
      <view
        class="recommend-video-item"
        v-for="item in consultList" 
        :key="item.id"
        @click="goVideoDetail(item.id)"
      >
        <view class="video-left">
          <image class="preview-img" :src="item.images"></image>
        </view>
        <view class="video-right">
          <view class="video-name">{{ item.name }}</view>
          <view class="tags">
            <text class="tag">{{ item.author }}</text>
          </view>
          <view class="info-row">
            <view class="info-l">
              <text class="info-tip view-num">200浏览</text>
              <text class="info-tip rate-num">{{item.score}}评分</text>
            </view>
            <view class="info-r">
              <text class="time">{{ item.home_create_time }}</text>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  name: "consult-list",
  components: {},
  props: {
    consultList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    goVideoDetail(videoId) {
      uni.navigateTo({url: `/pages/video/video?id=${videoId}`});
    }
  }
};
</script>
<style lang="scss" scoped>
.recommend-video-list {
  display: flex;
  flex-direction: column;
  .recommend-video-item {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    margin-bottom: 30rpx;
    box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, 0.04);
    border: 0.5px solid #ececec;
    border-radius: 18rpx;
    .video-left {
      width: 200rpx;
      .preview-img {
        width: 200rpx;
        height: 240rpx;
        border-radius: 10rpx;
        display: block;
      }
    }
    .video-right {
      flex: 1;
      margin-left: 30rpx;
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 10rpx;
      .video-name {
        white-space: normal;
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding-top: 10rpx;
      }
      .tags {
        margin-top: 40rpx;
        .tag {
          font-size: 24rpx;
          background-color: aliceblue;
          border-radius: 6rpx;
          color: #333;
          padding: 6rpx 14rpx;
          margin-right: 10rpx;
        }
      }
      .info-row {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;
        .rate-num {
          margin-left: 10rpx;
        }
        text {
          font-size: 24rpx;
          color: #71777d;
        }
      }
    }
  }
}
</style>